<script lang="ts">
export default {
  name: 'kaoshi6'
}
</script>
<script lang="ts" setup>
import { computed, ref, toValue, unref } from 'vue'

// 表单输入绑定：姓名 (input)、反馈类型 (select)、反馈详情 (textarea)、邮件通知 (radio) 的值与响应式数据绑定。
// 字符计数：使用计算属性显示反馈详情中可输入字符的剩余数量，并在 textarea 中实时更新。
// 条件渲染：根据用户提交的反馈信息，在提交后显示反馈结果。
// 事件处理：处理表单的提交事件，并显示提交的信息。
// 表单重置：在提交反馈后，表单清空，允许用户继续输入新的反馈。

// 响应式数据，用于管理表单的输入值
const name = ref('')
const feedbackType = ref('')
const details = ref('')
const emailNotify = ref('no')
const submitted = ref(false) // 添加一个响应式变量来跟踪表单是否已经提交

// 计算属性，用于计算反馈详情中可输入字符的剩余数量
const maxDetailsLength = 100
const remainingCharacters = computed(() => maxDetailsLength - details.value.length)

// 事件处理，处理表单的提交事件
const submitForm = () => {
  // 显示提交的信息
  submitted.value = true
  // 可以在这里添加代码将数据发送到服务器或进行其他处理
  // ...
}
// 表单重置逻辑
const resetForm = () => {
  name.value = ''
  feedbackType.value = ''
  details.value = ''
  emailNotify.value = 'no'
  submitted.value = false // 重置提交状态
}
</script>
<template>
  <div>
    <h2>用户反馈表单</h2>

    <!-- 姓名输入 -->
    <label for="name">姓名：</label>
    <input id="name" v-model="name" placeholder="请输入您的姓名" type="text" />

    <!-- 反馈类型选择 -->
    <label for="feedback-type">反馈类型：</label>
    <select id="feedback-type" v-model="feedbackType">
      <option value="">请选择反馈类型</option>
      <option value="complaint">投诉</option>
      <option value="suggestion">建议</option>
      <option value="other">其他</option>
    </select>

    <!-- 反馈详情 -->
    <label for="details">反馈详情：</label>
    <textarea id="details" v-model="details" placeholder="请输入您的反馈内容"></textarea>
    <p>剩余字符：{{ remainingCharacters }}</p>

    <!-- 邮件通知 -->
    <p>是否同意接受邮件通知？</p>
    <label> <input v-model="emailNotify" name="email-notify" type="radio" value="yes" /> 是 </label>
    <label> <input v-model="emailNotify" name="email-notify" type="radio" value="no" /> 否 </label>

    <!-- 提交按钮 -->
    <button @click="submitForm">提交反馈</button>

    <!-- 提交结果展示 -->
    <div v-if="submitted">
      <h3>反馈详情</h3>
      <p>姓名：{{ unref(name) }}</p>
      <p>反馈类型：{{ unref(feedbackType) }}</p>
      <p>反馈内容：{{ unref(details) }}</p>
      <p>是否同意接收通知：{{ unref(emailNotify) }}</p>
      <button @click="resetForm">再次反馈</button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
div {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type='text'],
select,
textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea {
  height: 100px;
  resize: none;
}

button {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #218838;
}

p {
  margin-top: 0;
}

h3 {
  margin-top: 20px;
}

input[type='radio'] {
  margin-right: 5px;
}

.feedback-result {
  border-top: 1px solid #ccc;
  margin-top: 20px;
  padding-top: 20px;
}
</style>
